<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div>
    <div class="card-head">


      <div class="cell-title">检测项目类型</div>
      <div class="cell-ser">
        <el-select v-model="queryParams.projectId" @change="handleSelectChange" placeholder="请选择">
          <el-option
            v-for="item in dateOptions"
            :key="item.id"
            :label="item.itemName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div id="echartsPie" style="width: 100%;height: 400px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import {selectProjectEchart} from "@/api/business/homePage"
import {queryItemList} from "@/api/business/projectTestitems"

export default {
  name: "EchartsPie",
  data() {
    return {
      charts: '',
      opinionData: [],
      xOptions: [],
      dateOptions: [],
      date: '',
      queryParams: {
        projectId: ''
      }
    }
  },
  watch: {},
  created() {
    this.$nextTick(() => {
      this.handleGetItemList()
      this.initLineOptions()
    })
  },
  methods: {
    handleSelectChange() {
      this.initLineOptions()
    },
    // 获取检测项
    handleGetItemList() {
      queryItemList().then((res) => {
        this.dateOptions = res
      })
    },
    getList(initNum, length, dValue) {
      let list = [initNum]
      for (let i = 1; i < length; i++) {
        list.push(0 + i * dValue)
      }
      return list
    },
    initLineOptions() {
      //x 轴
      this.xOptions = this.getList(0, 23, 1)
      // y轴
      this.yOptions = this.getList(0, 5, 100)
      selectProjectEchart(this.queryParams).then((res) => {
        if (res) {
          //值
          this.opinionData2 = res
        }
        this.drawLine('echartsPie')
      })
    },
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: '近七日收益',
            type: 'pie',
            radius: ["35%", "70%"],
            // lineStyle:{ color:'yellow' },
            data: this.opinionData2
          }]
      })
    }
  },
  //调用
  mounted() {
    this.$nextTick(function () {
      this.drawLine('echartsPie')
    })
  }
};
</script>
